//我的澄清
<template>
  <div class="div-main">
    <div class="div-top">
      <group class="group-main">
        <cell>
          <div slot="title"
               class="head">{{pageData1.InviteBidTopic}}</div>
          <div slot="inline-desc"
               class="div-desc">
            <div>发标日期:&nbsp;{{pageData1.EmitBidTime}}</div>
          </div>
        </cell>
      </group>
    </div>
    <div class="main">
  
      <div class="div-header">
        <div class="div-left">
          <span class="span-suggest">问</span>
        </div>
  
        <div class="div-left div-right-width">
          <div class="div-item">
            <div class="head">{{ pageData2.QuestionTitle}}</div>
            <div class="div-suggest-content">{{pageData2.QuestionContent}}</div>
            <div class="div-date">
              <div class="div-left">
                <div class="div-word"
                     v-for="(item,index) in documents1"
                     :key="index"
                     @click="displayFile(item.Url)">
                  <img :src="require('../../assets/img/'+item.icon)"
                       class="img-word">
                  <span class="span-word">{{item.DocName}}</span>
                </div>
              </div>
              <div class="div-right div-top-date">{{pageData2.QuestionTime}}</div>
              <div class="div-clear"></div>
            </div>
          </div>
        </div>
        <div class="div-clear"></div>
      </div>
  
      <div class="div-bottom">
        <div class="div-left">
          <span class="span-answer">答</span>
        </div>
        <div class="div-left div-right-width"
             v-show="!isAnswer">暂无澄清</div>
        <div class="div-left div-right-width"
             v-show="isAnswer">
          <div>
            {{ pageData2.AnswerContent}}
          </div>
          <div class="div-date">
            <div class="div-left">
              <div class="div-pic"
                   v-for="(item,index) in documents2"
                   :key="index"
                   @click="viewPic(item.Url)">
                <img :src="item.Url"
                     class="img-word">
                <span class="span-word">图片{{index+1}}</span>
              </div>
            </div>
            <div class="div-right div-top-date">{{pageData2.AnswerTime}}</div>
            <div class="div-clear"></div>
          </div>
          <div v-transfer-dom>
            <x-dialog v-model="isPic"
                      class="dialog-demo"
                      hide-on-blur>
              <div class="img-box">
                <img :src="picUrl"
                     style="max-width:100%">
              </div>
              <div @click="isPic=false">
                <span class="vux-close"></span>
              </div>
            </x-dialog>
          </div>
        </div>
      </div>
  
    </div>
    <a class="button button-red"
       @click="suggest"
       v-show="!isAnswer">
      <img src="../../assets/img/ask.png"
           class="img-ask"></img>
      我要澄清</a>
  </div>
</template>

<script>
import { XDialog, Search, Tab, TabItem, Group, Cell, XButton, dateFormat, Icon, TransferDomDirective as TransferDom } from 'vux'
import { InviteBidAskService } from '../../service/Services'

export default {
  name: 'CellBtn',
  directives: {
    TransferDom
  },
  components: {
    XDialog,
    Search,
    Tab,
    TabItem,
    Group,
    Cell,
    XButton,
    Icon
  },
  data () {
    return {
      pageData1: {},
      pageData2: {},
      isAnswer: false,
      documents1: [],
      documents2: [],
      isPic: false,
      picUrl: ''
    }
  },
  methods: {
    viewPic (url) {
      this.isPic = true
      // this.picUrl = 'http://wh-yudm:9208/UpFiles/201409/%E6%98%9F%E6%B2%B3172014_09_19(18_34_35_71)1922491392.jpg'
      this.picUrl = url
    },
    displayFile (url) {
      this.$router.push({ path: '/demos/display-file', query: { docUrl: url } })
    },
    loadData () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      InviteBidAskService.getInviteBid(this.$route.query.inviteBidGUID).then((res) => {
        let item = res.Data[0]
        item.InviteBidTopic = item.InviteBidTopic ? item.InviteBidTopic : ''
        item.EmitBidTime = item.EmitBidTime ? this.formatDate(item.EmitBidTime) : ''
        this.pageData1 = item
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
      if (this.$route.query.replyState === '已回复') { this.isAnswer = true }
      let providerGUID = this.$store.getters.getUserInfo.ProviderGUID
      InviteBidAskService.getInviteBidAskDetail(providerGUID, this.$route.query.inquiryGUID).then((res) => {
        this.$vux.loading.hide()
        for (var i = 0; i < res.Documents.length; i++) {
          var e = res.Documents[i]
          if (e.DocType === '标书质询文档') {
            e.icon = 'word.png'
            var strFile = e.Url.split('.')[1].toLowerCase()
            if (['xls', 'xlsx'].indexOf(strFile) > -1) {
              e.icon = 'excel.png'
            } else if (strFile === 'pdf') {
              e.icon = 'pdf.png'
            }
            this.documents1.push(e)
          } else if (e.DocType === '标书澄清文档') {
            this.documents2.push(e)
          }
        }
        let item = res.Data[0]
        item.QuestionTitle = item.QuestionTitle ? item.QuestionTitle : ''
        item.QuestionContent = item.QuestionContent ? item.QuestionContent : ''
        item.AnswerContent = item.AnswerContent ? item.AnswerContent : ''
        item.QuestionTime = item.QuestionTime ? this.formatDate(item.QuestionTime) : ''
        item.AnswerTime = item.AnswerTime ? this.formatDate(item.AnswerTime) : ''
        this.pageData2 = item
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    },
    suggest () {
      this.$router.push({ path: '/demos/invite-bid-ask-form',
        query: { inviteBidGUID: this.$route.query.inviteBidGUID,
          InquiryGUID: this.$route.query.inquiryGUID } })
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
@import '~vux/src/styles/close';

.dialog-demo {
    .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}

.main {
  margin-top: 20px;
}

// body{
// background: #ffffff!important;
// }
.head {
  font-weight: bold;
  font-size: 19px;
  color: #111111;
}

.content {
  margin: 10px 20px 10px 20px;
  font-size: 14px;
  color: #7F7F7F;
  letter-spacing: 0;
  line-height: 30px;
  border-top: 1px solid #E5E5E5;
  padding-top: 10px;
  padding-bottom: 10px;
}

.div-date {
  color: #888888;
}

.div-name {
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
}

.div-name span {
  display: inline-block;
  height: 25px;
  width: 4px;
  background: #DC220B;
  position: relative;
  top: 6px;
  margin-right: 10px;
}

.div-item {
  margin-bottom: 10px;
}

.span-suggest {
  background: #EA3C00;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  width: 24px;
  height: 24px;
  text-align: center;
  margin: 0 10px 0 20px;
}

.div-left {
  float: left;
}

.div-right {
  float: right;
}

.div-clear {
  clear: both;
}

.span-answer {
  background: #27C86B;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  width: 24px;
  height: 24px;
  text-align: center;
  margin: 0 10px 0 20px;
}

.div-header {
  margin-bottom: 10px;
}

.div-bottom {
  // margin-top: 20px;
  border-top: 1px solid #E5E5E5;
  padding-top: 20px;
}

.button-init {
  background-color: white;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  padding: 0 12px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid #888888;
}

.div-right-width {
  width: 82%;
}

.div-top {}

.button-red {
  box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #e5e3e6;
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
  background-color: red;
}

.button {
  margin-top: 20px;
  font-size: 17px;
  height: 50px;
  line-height: 50px; // padding: 0 12px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.img-word {
  width: 40px;
  height: 40px;
}

.div-main {
  word-wrap: break-word;
  font-family: PingFangSC-Regular;
}

.span-word {
  margin-left: 10px;
  position: relative;
  bottom: 14px;
}

.div-suggest-content {
  margin-top: 5px;
}

.div-word,
.div-pic {
  margin-top: 15px;
}

.div-top-date {
  padding-top: 22px;
}

.img-ask {
  width: 20px;
  height: 20px;
  position: relative;
  top: 3px;
}
</style>
